<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>收货地址详情</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">     
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/H5/css/sm.min.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/City.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/order.css" />
</head>
    <div class="page-group ms-controller" :controller="address">
        <div class="page page-current">
            <header class="bar bar-nav">
                <a class="icon icon-left pull-left" href="javascript:window.history.go(-1)"></a>
                <a class="icon icon-home pull-right" href="/H5"></a>
                <h1 class="title">地址详情</h1>
            </header>
            <div class="content visibility">
                <div class="list-block" style="margin-top:0">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">收货人</div>
                                    <div class="item-input">
                                        <input type="text" :duplex="@user" placeholder="收件人姓名">
                                    </div>
                              </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-email"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">手机号码</div>
                                    <div class="item-input">
                                        <input type="text" :duplex="@phone" placeholder="收货人联系号码">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-email"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">选择地址</div>
                                    <div class="item-input">
                                        <input type="text" readonly placeholder="选择地址" id="picker">
                                        <input type="hidden" name='location' id="value">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-email"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">详细地址</div>
                                    <div class="item-input">
                                        <input type="text" :duplex="@detail" placeholder="详细地址" value="" />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-toggle"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">设为默认</div>
                                    <div class="item-input">
                                        <label class="label-switch">
                                            <input class="default" type="checkbox">
                                            <div class="checkbox"></div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <button :on-click="@modify" class="address_btn">确 定</button>
                <button :on-click="@delete" class="btn">删 除</button>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/mall.js?v=10' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/City.js' charset='utf-8'></script>
    <script>
        var address = avalon.define({
            $id: "address",
            data: {},
            user: "",
            phone: "",
            detail: "",
            param: window.location.href.split("?addressId=")[1],
            getDetail: function(){
                Mall.request("/api/AddressDetail",{address_id: address.param})
                    .always( function( data ){
                        if( data.error_code == 0 ){
                            address.data = data.data;
                            address.user = data.data.name;
                            address.phone = data.data.mobile;
                            address.detail = data.data.address;
                            var value= data.data.area_label,
                                valueId =  data.data.area,
                                is_default =  data.data.is_default==0?false:true;
                            $('.default').prop("checked", is_default);
                            $('#picker').val( value );
                            $('#value').val( valueId );
                            $( ".content" ).removeClass( "visibility" );
                            Mall.request("/api/AreaDict")
                                .always( function( data ){
                                    if( data.error_code == 0 ){
                                        var area = new LArea();
                                        area.init({
                                            'trigger': '#picker', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
                                            'valueTo': '#value', //选择完毕后id属性输出到该位置
                                            'keys': {
                                                id: 'id',
                                                name: 'name'
                                            }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
                                            'type': 1, //数据源类型
                                            'data': data.data //数据源
                                        });
                                    }
                                } )
                        }
                    } )
            },
            delete: function(){
                $.confirm("确定要删除地址吗?", function(){
                    Mall.request("/api/AddressRemove",{address_id: address.param})
                        .always( function( data ){
                            if( data.error_code == 0 ){
                                $.alert( "删除成功", function(){
                                    window.history.go(-1);
                                } )
                            }
                        } )
                })
            },
            modify:function(){
                var msg = "";
                if( Mall.LOCK ){
                    return
                }
                if( !address.detail ){
                    msg = "请填写详细地址"
                }
                if( !$("#value").val() ){
                    msg = "请选择地区"
                }
                if( !Mall.mobile(address.phone) ){
                    msg = "请输入正确手机号码"
                }
                if( !address.user ){
                    msg = "请输入收件人姓名"
                }
                if( msg ){
                    $.toast( msg, 2000, "warning" );
                    return
                }
                var postData = {
                    name: address.user,
                    mobile: address.phone,
                    area: $("#value").val(),
                    address: address.detail,
                    address_id: address.param,
                    is_default: $( ".default" ).is(':checked')?1:0 
                }
                Mall.LOCK = true;
                Mall.request( "/api/AddressEdit", postData )
                    .always( function( data ){
                        if( data.error_code == 0 ){
                            var url = window.location.href;
                            $.toast( "修改成功", 1000, "success", function(){
                                window.history.go(-1);
                            } );
                        }
                        Mall.LOCK = false;
                    } )
            }
        })
        address.getDetail();
        avalon.scan( document.body );
    </script>
</body>
</html>
